<template>
  <!-- 测试页面 -->
  <div class="test">
    <!-- <p>{{count}}</p> -->
    <!-- <yd-button size="large" type="primary" @click.native="add">增加</yd-button>
      <yd-button size="large" type="danger" @click.native="reduce(20)">减少</yd-button> -->
    <div id="linkage">
      <i class="iconfont icon-dingwei"></i>
      <select v-model="selectedCopy" id="area" @change="changeArea">
        <option v-for="(one,key) in one" :value="one.id" :key="key">
            {{one.area}}
        </option>
      </select>
      <select id="university" @change='changeUni()' v-model="selectedUniCopy">
        <option v-for="(two,index) in selection" :value="two.id" :selectedCopy="index == 0 ? true : false" :key="index">
            {{two.university}}
        </option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    one: {
      type: Array,
      default: function () {
        return [{
          area: '区域',
          two: [{
            university: '学校',
            id: 0
          }],
          id: 110
        }
        ]
      }
    },
    selected: {
      type: String,
      default: function () {
        return '0'
      }
    },
    selectedUni: {
      type: String,
      default: function () {
        return '0'
      }
    }
  },
  data () {
    return {
      selectedCopy: this.selected,
      selectedUniCopy: this.selectedUni
    }
  },
  methods: {
    changeArea () {
      this.$emit('clickArea', this.selectedCopy)
    },
    changeUni () {
      this.$emit('clickUni', this.selectedUniCopy)
    }
  },
  computed: {
    selection: {
      get: function () {
        var that = this
        return this.one.filter(function (item) {
        /* eslint-disable */  return item.id == that.selectedCopy
        })[0].two
      }
    }
  },
  created(){
    this.selectedCopy = this.one[0].id
    this.selectedUniCopy = this.selection[0].id
  }
}
</script>
<style scoped>
.test{
  height: 42px;
  line-height: 42px;
  font-size: 14px;
}
  .linkage {
    height: 42px;
    line-height: 42px;
    background-color: #f1f1f1;
    padding: 0 12px;
    line-height: 42px;
    font-size: 14px;
    font-weight: 700;
  }
  #area {
    border: 0;
    background-color: #f1f1f1;
    background: transparent;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("./../../assets/img/xiala.png") no-repeat right center transparent;
    padding-right: 25px;
    -webkit-background-size: 30px;
    background-size: 30px;
    margin-right: -10px;
    outline: none;
  }
  #university {
    border: 0;
    background-color: #f1f1f1;
    background: transparent;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("./../../assets/img/xiala.png") no-repeat right center transparent;
    padding-right: 25px;
    -webkit-background-size: 30px;
    background-size: 30px;
    outline: none;
  }
  .icon-dingwei {
    color: #FFD602;
    font-size: 20px;
    vertical-align: middle;
  }
</style>
